<template>
    <div class="article-container">
        <!-- 导航 -->
        <van-nav-bar
            class="app-nav-bar"
            title="文章详情"
            left-arrow
            @click-left="$router.back()"
        />
        <!-- 导航 -->
        <div class="list">
            <div class="title">
                {{ article.title }}
            </div>
            <!-- auth-info -->
            <van-cell class="auth-info" center>
                <van-image
                    slot="icon"
                    class="avatal"
                    fat="cover"
                    round
                    :src="article.aut_photo"
                />
                <div slot="title" class="auth-name">
                    {{ article.aut_name }}
                </div>
                <div slot="label" class="pub-time">{{ article.pubdate | relativeTime }}</div>
                <van-button 
                    :type=" article.is_followed ? 'default':'info' " 
                    round 
                    :icon=" article.is_followed ? '' :'plus' " 
                    size="small" 
                    class="follow-btn"
                    :loading="isShowLoading"
                    @click="handelFollowUser"
                    >
                    {{ article.is_followed ? '取消关注' : '关注' }}
                    
                </van-button>
            </van-cell>
            <!-- 文章内容 -->
            <div class="markdown" ref="article-content" v-html="article.content"></div>
            <!-- 文章内容 -->
            <!-- 评论列表内容 -->
            <comment-list 
                :source="articleId" 
                :commentLists="commentLists" 
                @update-comments-count=" commmentTotasts = $event "
                @reply-click="replyComment" />
            <!-- 评论列表内容 -->
        </div>
        <!-- 底部区域 -->
        <div class="article-bottom">
            <van-button type="default" round size="small" class="comment-btn" @click=" isShowPopup = true ">写评论</van-button>
            <van-icon name="comment-o" :info="commmentTotasts" color="#777" />
            <van-icon :name=" article.is_collected ? 'star' : 'star-o' "  
                :color=" article.is_collected ? 'orange' : '#777' " @click="handeClollected" :loading="isShowClollected" />
            <van-icon 
                :name=" article.attitude === 1 ?  'good-job' : 'good-job-o' " 
                :color=" article.attitude === 1 ? 'hotpink' : '#777' " 
                :loading="isShowLikings"
                @click="handeLikings"
            />
            <van-icon name="share" color="#777" />
        </div>
        <!-- 底部区域 -->
        <!-- 添加评论遮罩层 -->
        <van-popup 
            v-model="isShowPopup" 
            position="bottom"
        > 
            <comment-post :target="articleId" @post="handelPost" />
        </van-popup>
        <!-- 添加评论遮罩层 -->

        <!-- 回复评论遮罩层 -->
        <!-- v-if 的作用就是为了，重新加载组件和渲染数据 -->
        <van-popup 
            v-if="isShowReplyPopup"
            v-model="isShowReplyPopup" 
            position="bottom"
        > 
            <comment-reply :article-id="articleId" :comment="replyComments" @close=" isShowReplyPopup = false " />
        </van-popup>
        <!-- 回复评论遮罩层 -->
    </div>
</template>

<script>
import './markdown.css'
import { getArticleById, goCollecting, delCollacting, goLikings, delLikings } from '@/api/article'
import { goFollow, delFollow } from '@/api/user'
import { ImagePreview } from 'vant';
import commentList from './components/comment-list'
import commentPost from './components/comment-post'
import commentReply from './components/comment-reply'
    export default {
        name: 'articleIndex',
        props:{
            articleId: {
                type: [String,Number,Object],
                required: true
            }
        },
        components:{
            commentList,
            commentPost,
            commentReply
        },
        data() {
            return {
                article: [] ,//文章数据
                isShowLoading: false, //关注是否显示加载中
                isShowClollected: false , //收藏按钮显示加载中
                isShowLikings: false , //点赞按钮显示加载中
                isShowPopup: false , //显示popup弹出框
                commentLists: [], //评论列表数据
                commmentTotasts: 0, //评论的总数
                isShowReplyPopup: false , //回复评论是否显示
                replyComments: {}  //评论回复的的对象
            }
        },
        methods: {
            async loadArticleById(){
                const { data } = await getArticleById(this.articleId)
                // console.log("文章：",data)
                this.article = data.data
                // 因为数据更新和视图更新是需要时间的，所以这里的第一时间不能获取到最新的DOM，需要使用this.$nextTick()
                this.$nextTick(()=>{
                    this.handelPreViewImg();
                })
            },
            // 图片预览
            handelPreViewImg(){
                /*
                    步骤：
                        1.获取到DOM容器
                        2.找到所有的img
                        3.给所有的img添加点击事件
                        4.使用ImagePreview进行图片的预览
                 */
                // 1.获取到DOM容器
                const allDOM = this.$refs['article-content']
                // 2.获取所有的img
                const allImg = allDOM.querySelectorAll('img')
               // 3.给所有的img添加点击事件
                let imgPaths = []
                allImg.forEach((img,index)=>{
                    imgPaths.push(img.src)
                    img.onclick = function(){
                        ImagePreview({
                            images: imgPaths,  //图片路径
                            startPosition: index  //图片的开始下标
                        })
                    }
                })
            },
            //操作关注和取消用户
            async handelFollowUser(){
                this.isShowLoading = true
                if(this.article.is_followed){
                    // 已关注用户，取消关注
                    await delFollow(this.article.aut_id)
                    console.log("请求数据成功")
                }else{
                    // 未关注用户，关注
                    await goFollow(this.article.aut_id)
                    console.log("请求数据成功")
                }
                this.article.is_followed = !this.article.is_followed
                this.isShowLoading = false
            },
            //操作收藏和取消收藏
            async handeClollected(){
                this.isShowClollected = true
                if(this.article.is_collected){
                    // 已收藏，取消收藏
                    await delCollacting(this.articleId)
                }else{
                    // 未收藏，收藏
                    await goCollecting(this.articleId)
                }
                this.article.is_collected = !this.article.is_collected
                this.isShowClollected = false
            },
            //点赞和取消点赞
            async handeLikings(){
                this.isShowLikings = true
                if(this.article.attitude === 1){
                    // 已点赞，取消点赞
                    await goLikings(this.articleId)
                    this.article.attitude = -1
                }else{
                    // 未点赞，点赞
                    await delLikings(this.articleId)
                     this.article.attitude = 1
                }
                this.isShowLikings = false
            },
            //处理发表评论添加数据的操作
            handelPost(comment){
                // 把最新的数据添加到commentLists的最顶部
                this.commentLists.unshift(comment)
                // 关不遮罩层
                this.isShowPopup = false

                // 评论数量自增
                this.commmentTotasts++
            },
            //评论回复功能
            replyComment(comment){
                this.replyComments = comment
                // 显示回复评论弹出层
                this.isShowReplyPopup = true
            }
        },
        created() {
            this.loadArticleById();
        },
    }
</script>

<style lang="less" scoped>
.app-nav-bar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
.list{
    position: fixed;
    top: 46px;
    left: 0;
    right: 0;
    bottom: 35px;
    overflow-y: auto;
}
.title{
    font-size: 20px;
    color: #3a3a3a;
    padding: 14px;
    background-color: #fff;
    font-weight: 700;
    margin: 0;
}

.auth-info{
    .avatal{
        width: 35px;
        height: 35px;
        margin-right: 11px;
    }
    .auth-name{
        font-size: 12px;
        color: #333;
    }
    .pubdate{
        font-size: 11px;
        color: #b4b4b4;
    }
    .follow-btn{
        width: 85px;
        height: 29px;
    }
}

.markdown{
    background-color: #fff;
    padding: 14px;
}
.article-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45px;
    background-color: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .comment-btn{
        width: 130px;
        height: 35px;
    }
}
</style>